<!-- @format -->

<script setup lang="ts">
// 定义组件的props
defineProps({
  size: {
    type: String,
    default: '',
  },
  icon: {
    type: String,
    default: 'share',
  },
  padding: {
    type: Boolean,
    default: true,
  },
  title: {
    type: String,
    default: '',
  },
})
const emit = defineEmits(['click'])
</script>

<template>
  <div class="the-icon" @click="$emit('click')">
    <wd-icon :size="size" :name="icon"></wd-icon>
    <text v-if="$slots.default || title" :style="padding ? 'padding-left: 8rpx' : ''">
      <slot v-if="!title"></slot>
      <template v-else>{{ title }}</template>
    </text>
  </div>
</template>

<style scoped>
.the-icon {
  display: inline-block;
}
</style>
